<template>
  <div class="app-container home">
    <!-- v-hasPermi="['system:user:add']" -->
     <div v-hasPermi="['remarks']">
      完善了 /generalserver/user/info <br/>
      route/index.vue 中 dynamicRoutes 配置动态路由，文件中有示例 <br/>
      页面内功能部分：使用 v-hasPermi="['remarks']" 在元素上鉴权 <br/>
 <br/>
      另外一套：字典用法，为了适配不同app应用下的字典接口 <br/>
      mixins/dicMixin.js 混入 <br/>
      页面使用 this.loadDicts(['','']) 初始化需要的字典 <br/>
      dictMap.字典名称 引用字典数组 <br/>
      getDictName('字典类型名称', 对应value)  映射字典数据名称 <br/>
     </div>
      <br/>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>=========</span>
      </div>
      <el-button :plain="true" @click="open1">消息</el-button>
      <el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>
      <el-button type="text" @click="open">点击打开 Message Box</el-button>
      <br>
      右侧
      <el-button plain @click="Aopen1">
        成功
      </el-button>
      <el-button plain @click="Aopen2">
        警告
      </el-button>
      <el-button plain @click="Aopen3">
        消息
      </el-button>
      <el-button plain @click="Aopen4">
        错误
      </el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>

    </el-card>
    <el-card class="box-card" title="">
      <div slot="header" class="clearfix">
        <span> 上传与下载 组件</span>
      </div>
      <div>
        <file-upload
          :limit="5"
          :file-type="['png', 'jpg', 'jpeg']"
          :data="{uploadType: 'product_credential'}"
          @input="handeleBackFile"
        />
        <div>上传组件须知：必须填入 uploadType 参数</div>
        <div>fileUpload组件中判断了 上传的文件是私密的还是公共的，做了对应的预览下载处理</div>
      </div>
      <div>
        =====================================
      </div>
      <div>
        私密文件下载，使用：全局注册的  download 方法 示例： download(fileId)，fileUpload组件中有使用示例
      </div>
      <div>
        ===================================== <br>
        ===================================== <br>
        ===================================== <br>
        ===================================== <br>
        关于图片展示组件 ImagePreview 组件，也做了私密文件的判断<br>
        <image-preview :width="100" :height="100" :src="'product/credential/20250823/0cad54bbf5704f4f80f363af8cd29e2a'"></image-preview>
      </div>
      <div>
        ===================================== <br>
        ===================================== <br>
        ===================================== <br>
        ===================================== <br>
        图片上传组件，也做了私密文件的判断<br>
        与文件上传组件一致，也是通过@input来回调文件组的，请自行判断好是保存 fileId 还是 fileUrl, 组件内为了预览使用，会自动请求私密文件预览接口保存到file.url 所以请判断好。<br>
        <image-upload
          v-model="salespersonProfilePictureFileId"
          :data="{uploadType: 'customer_pri'}"
          @input="handeleBackFile"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      fileList:[],
      salespersonProfilePictureFileId:"https://pstatic-yfst.oss-cn-hangzhou.aliyuncs.com/customer/pub20250824/10e6deb624f64e2e9bbe5ac8ed96fd43.jpeg"
    }
  },
  created() {
  },
  methods: {
    handeleBackFile(fileList){
      this.fileList = fileList
      console.log(this.fileList);
    },
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
    },
    open1() {
      this.$message({
        showClose: true,
        message: '这是一条消息提示',
        duration: 0
      });
    },

    open2() {
      this.$message({
        showClose: true,
        message: '恭喜你，这是一条成功消息',
        type: 'success',
        duration: 0
      });
    },

    open3() {
      this.$message({
        showClose: true,
        message: '警告哦，这是一条警告消息',
        type: 'warning',
        duration: 0
      });
    },

    open4() {
      this.$message({
        showClose: true,
        message: '错了哦，这是一条错误消息',
        type: 'error',
        duration: 0
      });
    },

    Aopen1() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success',
        duration: 0
      });
    },

    Aopen2() {
      this.$notify({
        title: '警告',
        message: '这是一条警告的提示消息',
        type: 'warning',
        duration: 0
      });
    },

    Aopen3() {
      this.$notify.info({
        title: '消息',
        message: '这是一条消息的提示消息',
        duration: 0
      });
    },

    Aopen4() {
      this.$notify.error({
        title: '错误',
        message: '这是一条错误的提示消息',
        duration: 0
      });
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
}

.box-card+.box-card {
  margin-top: 20px;
}
</style>
